<template>
  <div id="trend">
    <el-tabs>
      <el-tab-pane label="趋势图（小时)">
        <div id="hour"></div>
      </el-tab-pane>
      <el-tab-pane label="趋势图（天）">
        <div id="day"></div>
      </el-tab-pane>
      <el-tab-pane label="趋势图（月）">
        <div id="month"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { baseURL } from '../../utils/ipConfig'
// #F8F9FD
export default {
  props: ["touchTest", "situationtitle"],
  data() {
    return {
      trend: {
        item: [],
        data: [],
      },
      sky: {
        item: [],
        data: [],
      },
      month: {
        item: [],
        data: [],
      },
    };
  },
  watch: {
    touchTest() {
      this.getDataList();
      this.getDataListday();
      this.getDataListmonth();
    },
  },
  mounted() {
    this.getDataList();
    this.getDataListday();
    this.getDataListmonth();
  },
  methods: {
    // 进入页面成功率加载
    getDataList() {
      let _this = this;
      // 小时趋势图数据
      if (_this.situationtitle == "全网") {
        let params = new URLSearchParams();
        params.append("cityCode", "0851");
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.trend.data = [];
              _this.trend.item = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.trend.data.push(item.usercount);
                // 日期
                _this.trend.item.push(item.hour + "");
              });
              let time = [];
              time = _this.trend.item.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.trend.item = time;
              _this.tendency("hour", _this.trend.data, _this.trend.item);
            } else {
              _this.trend.data = [];
              _this.tendency("hour", _this.trend.data, _this.trend.item);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", "0851");
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.trend.data = [];
              _this.trend.item = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.trend.data.push(item.usercount);
                // 日期
                _this.trend.item.push(item.hour + "");
              });
              let time = [];
              time = _this.trend.item.map(
                (item) => item.substring(item.length - 2) + ":00"
              );
              _this.trend.item = time;
              _this.tendency("hour", _this.trend.data, _this.trend.item);
            } else {
              _this.trend.data = [];
              _this.tendency("hour", _this.trend.data, _this.trend.item);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    getDataListday() {
      let _this = this;
      if (_this.situationtitle =="全网") {
        let params = new URLSearchParams();
        params.append("cityCode", "0851");
        // 小时趋势图数据
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`,params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.sky.data = [];
              _this.sky.item = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.sky.data.push(item.tcp_create_time);
                // 日期
                // _this.trend.item.push(item.hour+"");
              });
              // let time = [];
              // time = _this.trend.item.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.trend.item = time;
              _this.tendencyday(_this.sky.data,);
            } else {
              _this.sky.data=[];
              _this.tendencyday(_this.sky.data);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", "0851");
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.sky.data = [];
              _this.sky.item = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.sky.data.push(item.tcp_create_time);
                // 日期
                // _this.trend.item.push(item.hour+"");
              });
              // let time = [];
              // time = _this.trend.item.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.trend.item = time;
              _this.tendencyday(_this.sky.data);
            } else {
              _this.sky.data=[];
              _this.tendencyday(_this.sky.data);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    getDataListmonth() {
      let _this = this;
      if (_this.situationtitle =="全网") {
        let params = new URLSearchParams();
        params.append("cityCode", "0851");
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`,params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.month.data = [];
              _this.month.item = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.month.data.push(item.tcp_suc_req_time);
                // 日期
                // _this.trend.item.push(item.hour+"");
              });
              let time = [];
              // time = _this.trend.item.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.trend.item = time;
              time = _this.month.data.slice(-13,-1);
              _this.month.data=time;
              _this.tendencymonth(_this.month.data);
            } else {
              _this.month.data=[];
              _this.tendencymonth(_this.month.data);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", "0851");
        params.append("dataType", _this.situationtitle);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.month.data = [];
              _this.month.item = [];
              resData.data.forEach((item) => {
                // 用户数
                _this.month.data.push(item.tcp_suc_req_time);
                // 日期
                // _this.trend.item.push(item.hour+"");
              });
              let time = [];
              // time = _this.trend.item.map(
              //   (item) => item.substring(item.length - 2) + ":00"
              // );
              // _this.trend.item = time;
              time = _this.month.data.slice(-13,-1);
              _this.month.data=time;
              _this.tendencymonth(_this.month.data);
            } else {
              _this.month.data=[];
              _this.tendencymonth(_this.month.data);
              
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    tendency(name, data, item) {
      let myChart = this.$echarts.init(document.getElementById(name));
      myChart.setOption({
        backgroundColor: "#EEF1F9",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "2%",
          right: "8%",
          top: "10%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: item,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        // xAxis: [
        //   {
        //     axisLabel: {
        //       // 坐标轴刻度标签换行处理
        //       formatter: function (params) {
        //         var newParamsName = ""; // 最终拼接成的字符串
        //         var paramsNameNumber = params.length; // 实际标签的个数
        //         var provideNumber = 4; // 每行能显示的字的个数
        //         var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
        //         /**
        //          * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
        //          */
        //         // 条件等同于rowNumber>1
        //         if (paramsNameNumber > provideNumber) {
        //           /** 循环每一行,p表示行 */
        //           for (var p = 0; p < rowNumber; p++) {
        //             var tempStr = ""; // 表示每一次截取的字符串
        //             var start = p * provideNumber; // 开始截取的位置
        //             var end = start + provideNumber; // 结束截取的位置
        //             // 此处特殊处理最后一行的索引值
        //             if (p === rowNumber - 1) {
        //               // 最后一次不换行
        //               tempStr = params.substring(start, paramsNameNumber);
        //             } else {
        //               // 每一次拼接字符串并换行
        //               tempStr = params.substring(start, end) + "\n";
        //             }
        //             newParamsName += tempStr; // 最终拼成的字符串
        //           }
        //         } else {
        //           // 将旧标签的值赋给新标签
        //           newParamsName = params;
        //         }
        //         return newParamsName;
        //       },
        //     },
        //     type: "category",
        //     data: item,
        //     boundaryGap: false,
        //     axisTick: {
        //       alignWithLabel: true,
        //     },
        //   },
        // ],
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 16,
          },
        },
        series: [
          {
            data: data,
            type: "line",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
            symbol: "none",
            smooth: 0.2,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
          },
        ],
      });
    },
    tendencyday(data){
      let myChart = this.$echarts.init(document.getElementById("day"));
      myChart.setOption({
        backgroundColor: "#EEF1F9",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "2%",
          right: "8%",
          top: "10%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data:  [
            "6-1",
            "6-2",
            "6-3",
            "6-4",
            "6-5",
            "6-6",
            "6-7",
            "6-8",
            "6-9",
            "6-10",
            "6-11",
            "6-12",
            "6-13",
            "6-14",
            "6-15",
            "6-16",
            "6-17",
            "6-18",
            "6-19",
            "6-20",
            "6-21",
            "6-22",
            "6-23",
            "6-24",
            "6-25",
          ],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        // xAxis: [
        //   {
        //     axisLabel: {
        //       // 坐标轴刻度标签换行处理
        //       formatter: function (params) {
        //         var newParamsName = ""; // 最终拼接成的字符串
        //         var paramsNameNumber = params.length; // 实际标签的个数
        //         var provideNumber = 4; // 每行能显示的字的个数
        //         var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
        //         /**
        //          * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
        //          */
        //         // 条件等同于rowNumber>1
        //         if (paramsNameNumber > provideNumber) {
        //           /** 循环每一行,p表示行 */
        //           for (var p = 0; p < rowNumber; p++) {
        //             var tempStr = ""; // 表示每一次截取的字符串
        //             var start = p * provideNumber; // 开始截取的位置
        //             var end = start + provideNumber; // 结束截取的位置
        //             // 此处特殊处理最后一行的索引值
        //             if (p === rowNumber - 1) {
        //               // 最后一次不换行
        //               tempStr = params.substring(start, paramsNameNumber);
        //             } else {
        //               // 每一次拼接字符串并换行
        //               tempStr = params.substring(start, end) + "\n";
        //             }
        //             newParamsName += tempStr; // 最终拼成的字符串
        //           }
        //         } else {
        //           // 将旧标签的值赋给新标签
        //           newParamsName = params;
        //         }
        //         return newParamsName;
        //       },
        //     },
        //     type: "category",
        //     data: item,
        //     boundaryGap: false,
        //     axisTick: {
        //       alignWithLabel: true,
        //     },
        //   },
        // ],
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 16,
          },
        },
        series: [
          {
            data: data,
            type: "line",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
            symbol: "none",
            smooth: 0.2,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
          },
        ],
      });
    },
    tendencymonth(data){
      let myChart = this.$echarts.init(document.getElementById("month"));
      myChart.setOption({
        backgroundColor: "#EEF1F9",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "2%",
          right: "8%",
          top: "10%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
          ],
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        // xAxis: [
        //   {
        //     axisLabel: {
        //       // 坐标轴刻度标签换行处理
        //       formatter: function (params) {
        //         var newParamsName = ""; // 最终拼接成的字符串
        //         var paramsNameNumber = params.length; // 实际标签的个数
        //         var provideNumber = 4; // 每行能显示的字的个数
        //         var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
        //         /**
        //          * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
        //          */
        //         // 条件等同于rowNumber>1
        //         if (paramsNameNumber > provideNumber) {
        //           /** 循环每一行,p表示行 */
        //           for (var p = 0; p < rowNumber; p++) {
        //             var tempStr = ""; // 表示每一次截取的字符串
        //             var start = p * provideNumber; // 开始截取的位置
        //             var end = start + provideNumber; // 结束截取的位置
        //             // 此处特殊处理最后一行的索引值
        //             if (p === rowNumber - 1) {
        //               // 最后一次不换行
        //               tempStr = params.substring(start, paramsNameNumber);
        //             } else {
        //               // 每一次拼接字符串并换行
        //               tempStr = params.substring(start, end) + "\n";
        //             }
        //             newParamsName += tempStr; // 最终拼成的字符串
        //           }
        //         } else {
        //           // 将旧标签的值赋给新标签
        //           newParamsName = params;
        //         }
        //         return newParamsName;
        //       },
        //     },
        //     type: "category",
        //     data: item,
        //     boundaryGap: false,
        //     axisTick: {
        //       alignWithLabel: true,
        //     },
        //   },
        // ],
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 16,
          },
        },
        series: [
          {
            data: data,
            type: "line",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
            symbol: "none",
            smooth: 0.2,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
          },
        ],
      });
    }
  },
};
</script>

<style>
#hour,
#day,
#month {
  width: 20vw;
  height: 30vh;
}
</style>